<template>
    <div class="info">
        <div class="header">
            <div>
                <el-avatar :size="100" style="margin-right: 20px;"
                    src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
            </div>
            <div style="flex: 1;">
                <div class="user-name">
                    <div>{{ this.$store.state.user.username }}</div>
                    <el-tag size="small">卖家信用优秀</el-tag>
                    <el-tag size="small">买家信用优秀</el-tag>
                </div>
                <div class="user-fav">
                    <div class="fav-item" @click="toPage('/myConcern')">
                        <i class="el-icon-user"></i>
                        <span style="margin-left: 5px;">关注 : </span>
                        <span>{{ followCount }}</span>
                    </div>
                    <div class="fav-item" @click="toPage('/myFans')">
                        <i class="el-icon-user"></i>
                        <span style="margin-left: 5px;">粉丝 : </span>
                        <span >{{ fansCount }}</span>
                    </div>
                    <div class="fav-item" @click="toPage('/myFavorite')">
                        <i class="el-icon-star-off"></i>
                        <span style="margin-left: 5px;">收藏</span>
                        <span>{{ favCount }}</span>
                    </div>
                </div>
            </div>
            <div>
                <!-- <el-button type="primary" class="edit-info" @click="editInfo">
                    编辑资料
                </el-button> -->
            </div>
        </div>
        <div class="action">
            <div class="action-item">
                <el-button type="text" @click="toPage('/myAddress')">
                    <div><Address /></div>
                    <div style="margin-top: 10px;">我的地址</div>      
                </el-button>
            </div>
            <div class="action-item">
                <el-button type="text" @click="toPage('/myOrder')">
                    <div><Order /></div>
                    <div style="margin-top: 10px;">我的订单</div>
                </el-button>
            </div>
            <div class="action-item">
                <el-button type="text" @click="toPage('/myAccount')">
                    <div><MyAccount /></div>
                    <div style="margin-top: 10px;">我的账户</div>
                </el-button>
            </div>
        </div>
        <div>
            <el-tabs v-model="selectTab">
                <el-tab-pane label="我的商品" name="goods">
                    <GoodsList :goodsList="goodsList"/>
                </el-tab-pane>
                <el-tab-pane label="信用及评价" name="comment">
                    <CommentList :commentList="commentList"/>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
import GoodsList from './components/GoodsList.vue';
import CommentList from './components/CommentList.vue';
import Address from '../icon/Address.vue';
import Order from '../icon/Order.vue';
import MyAccount from '../icon/MyAccount.vue';
    export default {
        name: "Info",
        components: {
            GoodsList, CommentList, Address, Order, MyAccount
        },
        data(){
            return{
                goodsList: [],
                commentList: [],
                followCount: 0,  // 关注数
                fansCount: 0,  // 粉丝数
                favCount: 0,  // 收藏数
                selectTab: 'goods'
            }
        },
        methods:{
            getCount() {  // 获取关注数和粉丝数
                this.$axios.get('/follow/stats/'
                    + this.$store.state.user.userId).then(res => {
                    if (res.data.code === 200) {
                        this.followCount = res.data.data.followCount
                        this.fansCount = res.data.data.fansCount
                    }
                })
                this.$axios.get('/favorite/count/'
                    + this.$store.state.user.userId).then(res => {
                    if (res.status === 200) {
                        this.favCount = res.data.data
                    }
                })
            },
            toPage(url) {
                this.$router.push(url)
            },
            getMyGoods() {
                this.$axios.get(`goods/user/${this.$store.state.user.userId}`).then(res => {
                    if (res.status === 200) {
                        this.goodsList = res.data.data.records
                    }
                })
            },
            getComment() {
                this.$axios.get(`comment/received/${this.$store.state.user.userId}`).then(res => {
                    if (res.status === 200) {
                        this.commentList = res.data.data.records
                    }
                })
            }
        },
        mounted() {
            this.getCount()
            this.getMyGoods()
            this.getComment()
        }
    }
</script>

<style scoped lang="scss">
.info {
    width: 100%;  
    padding: 20px 40px 40px;
    box-sizing: border-box;
    .header {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .user-name {
            display: flex;
            align-items: center;
            height: 30px;
            white-space: nowrap;
            line-height: 30px;
            font-weight: bold;
            .el-tag {
                margin-left: 10px;
            }
        }
        .user-fav {
            font-size: 0.85em;
            margin-top: 10px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            .fav-item {
                cursor: pointer;
                text-align: left;
            }
        }
    }
    .action {
        display: flex;
        margin: 10px 0 20px;
        .action-item {
            flex: 1;
        }
    }
}

.el-form-item {
    .el-select {
        width: 100%;
    }
}

:deep(.el-tabs) {
    .el-tabs__content {
        overflow: visible !important;
    }
}


</style>